import { Divider, Row, Col, Typography } from "antd"
import { useSelector, useDispatch } from "react-redux"
import { useEffect } from "react"
import Layout from "./Layout"
import ProductItem from "./ProductItem"
import Search from "./Search"
import { get_products } from "../../store/actions/product"
const {Title} = Typography
function Home () {
    const dispatch = useDispatch()
    useEffect(() => {
        dispatch(get_products({sortBy:"sold",limit: 5, order: "desc"}))
        dispatch(get_products({sortBy:"createdAt",limit: 5, order: "desc"}))
    },[])
    const {sold , createdAt } = useSelector(state => state.product)
    return (
        <Layout title="首页" subTitle="尽情享受吧！">
            <Search />
            <Divider />
            <Title style={{marginTop: 10}} level={5}>最新上架</Title>
            <Row gutter={[16, 16]}>
                {
                    sold.map(item => (
                        <Col span="6" key= {item._id}>
                            <ProductItem  product={item}/>
                        </Col>
                    ))
                }
                
            </Row>
            <Title style={{marginTop: 10}} level={5}>最受欢迎</Title>
            <Row gutter={[16, 16]}>
                {
                    createdAt.map(item => (
                        <Col span="6">
                        <ProductItem product={item} />
                        </Col>
                    ))
                }
            </Row>
        </Layout>
    )
}
export default Home